<template>
    <div class="app-container">                        
        <levelbar></levelbar>
        <TableLayoutes form-title="">
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="addCount">添加倒计时</el-button>
                </div>
            </div>
            <el-table :data="queryData" style="width: 100%" border  v-loading="loading" ref="multipleTable">
                <el-table-column label="倒计时内容" align="center" min-width="200">
                    <template scope="scope">
                        {{scope.row | newContent}}
                    </template>
                </el-table-column>
                <el-table-column label="倒计时开始日期" align="center"  min-width="120">
                    <template scope="scope">
                        {{scope.row.startTime.substring(0,10) || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="倒计时结束日期" align="center"  min-width="120">
                    <template scope="scope">
                        {{scope.row.endTime.substring(0,10) || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="显示班级" align="center" min-width="200">
                    <template scope="scope">
                        <p class="class-braek link-src" @click="showClass(scope.row.classId)">{{scope.row.classId || '--'}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" align="center">
                    <template scope="scope">
                        {{scope.row.creator || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" min-width="158">
                    <template scope="scope">
                        {{scope.row.createTime | timeFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="left" width="120">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container"></div>
        </TableLayoutes>
        <addCountdown :dataForm="dataForm" @search="getClassDeclaration()"></addCountdown>
        <el-dialog :visible.sync="showClassData.dialogShowClass" title="倒计时班级" size="tiny" :before-close="handleClose">
            <div class="show-class">{{showClassData.classNames}}</div>
            <div class="footer">
                <el-button type="primary" @click="handleClose()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayoutes from 'components/TableLayoutes';
import addCountdown from './comps/addCountdown';
import { mapGetters, mapState, mapActions } from 'vuex';
import { getCountdownLimitSix, deleteSchoolCountDown} from 'api/wisdom';
import moment from 'moment';
export default {
    name: 'countdown',
    components: { Levelbar, TableLayoutes, addCountdown },
    data() {
        return {
            loading: true,
            gradeList: [],
            talkList: [
                {
                    talkId: '0',
                    talkDesc: '语音'
                },
                {
                    talkId: '1',
                    talkDesc: '视频'
                }
            ],
            query: {
                grade: '',
                classId: '',
                stuName: '',
                talkType: ''
            },
            showClassData: {
                dialogShowClass: false,
                classNames: ''
            },
            dataForm: {
                title: '添加倒计时',
                dialogAddCount: false,
                startTime: '',
                endTime: '',
                content: '',
                idEdit: false,
                dateCount: 0, // 剩余天数
                classList: [],
                checkedListClassId: [] // 勾选的班级数组
            },
            queryData: [],
            rules: {
                grade: [
                    {required: true, message: '请选择年级', trigger: 'blur'}
                ],
                classId: [
                    {required: true, message: '请选择班级', trigger: 'blur'}
                ]
            }
        }
    },
    filters: {
        newContent(val) {
            let dateCount = 0;
            if (val.startTime && val.endTime) {
                let startDate = moment(val.startTime).format('YYYY-MM-DD'),
                    endDate = moment(val.endTime).format('YYYY-MM-DD'),
                    nowDate = moment(new Date()).format('YYYY-MM-DD');
                if (endDate > nowDate) {// 结束时间<=今天
                    let _endDate = moment(endDate),
                        _nowDate = moment(nowDate),
                        _startDate = moment(startDate);
                    if (startDate < nowDate) {// 开始时间<今天
                        dateCount = moment(_endDate - _nowDate).format('DD')-1;
                    } else {                // 开始时间>=今天
                        dateCount = moment(_endDate - _startDate).format('DD')-1;
                    }
                }
            }
            return `距离${val.content}还有${dateCount}天`
        },
        timeFilter(val) {
            if (val) {
                return val.substring(0, 16)
            } else {
                return '--'
            }
        }
    },
    created() {
        this.getClassDeclaration();
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName',
            'schoolType',
            'roleType'
        ]),
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']), 
        // 获取列表
        getClassDeclaration() {
            this.loading=true;
            let json={
                schoolId: this.schoolId
            };
            getCountdownLimitSix(json).then(res => {
                this.loading = false;
                this.queryData = res.data.content;
            }).catch(() => {
                this.loading = false;
            })
        },
        // 点击添加倒计时
        addCount() {
            if (this.queryData.length>=6) {
                this.$message.info('最多新增6个倒计时')
                return
            }
            this.dataForm.title = '添加倒计时';
            this.dataForm.dialogAddCount = true;
            this.dataForm.idEdit=false;
            this.dataForm.startTime='';
            this.dataForm.endTime='';
            this.dataForm.content='';
            this.dataForm.countDownId='';
            this.dataForm.classList=[];
            this.dataForm.checkedListClassId=[];
        },
        edit(row) {
            this.dataForm.title = '编辑倒计时';
            this.dataForm.dialogAddCount = true;
            this.dataForm.idEdit=true;
            this.dataForm.startTime = new Date(row.startTime);
            this.dataForm.endTime = new Date(row.endTime);
            this.dataForm.content = row.content;
            this.dataForm.classList = [];
            this.dataForm.checkedListClassId = row.classIds;
            this.dataForm.countDownId=row.countDownId;
        },
        deleteRow(row) {
            this.$confirm('是否确认删除该倒计时？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loading=true;
                let json={
                    countDownId: row.countDownId,
                    schoolId: this.schoolId,
                    list: [{classList: []}]
                }
                if (row.classIds) {
                    row.classIds.forEach((item) => {
                        json.list[0].classList.push({pId: item})
                    })
                }            
                deleteSchoolCountDown(json).then(response => {
                    this.getClassDeclaration();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })                   
                }).catch((e) => {       
                    this.loading=false;
                });  
            })
        },
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.getClassDeclaration();
        },
        handleCurrentChange(val) {            
            this.listQuery.page = val;
            this.getClassDeclaration();
        },
        showClass(val) {
            this.showClassData.classNames = '';
            this.showClassData.dialogShowClass = true;
            this.showClassData.classNames = val;
        },
        handleClose() {
            this.showClassData.dialogShowClass = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .class-braek{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .show-class{
        text-align: center;
        margin: 0 auto;
        width: 90%;
    }
    .footer{
        text-align: center;
        margin-top: 40px;
    }
}
</style>